<template>
	<div class="common-layout">
	  <el-container>
	    <el-header>
			  <el-row>
				  <el-col :span="3"></el-col>
				  <el-col :span="18"></el-col>
				  <el-col :span="3">
					<el-dropdown @command="handleCommand">
						<el-avatar size="large">
							{{ userInfo.name }} 
						</el-avatar>
					    <span class="el-dropdown-link">
					      <el-icon class="el-icon--right">
					        <arrow-down />
					      </el-icon>
					    </span>
					    <template #dropdown>
					      <el-dropdown-menu>
							<el-dropdown-item command="updateInfo">修改信息</el-dropdown-item>
					        <el-dropdown-item command="logout">退出</el-dropdown-item>
					      </el-dropdown-menu>
					    </template>
					  </el-dropdown>
					  
				  </el-col>
			  </el-row>
		  </el-header>
	    <el-container>
	      <el-aside width="200px">
				
				<el-menu
				    default-active="2"
				    class="el-menu-vertical-demo"
					router
				  >
				    <el-sub-menu index="1">
				      <template #title>
						<el-icon><Setting /></el-icon>
				        <span>系统管理</span>
				      </template>
				      <el-menu-item index="/sys/user">用户管理</el-menu-item>
				      <el-menu-item index="/sys/menu">菜单管理</el-menu-item>
					  <el-menu-item index="/sys/role">角色管理</el-menu-item>
				    </el-sub-menu>
					
					<el-sub-menu index="2">
					  <template #title>
						<el-icon><Setting /></el-icon>
					    <span>商品管理</span>
					  </template>
					  <el-menu-item index="/goods/type">商品类型管理</el-menu-item>
					  <el-menu-item index="/goods">商品管理</el-menu-item>
					</el-sub-menu>
				    
				  </el-menu>
				
			</el-aside>
	      <el-main>
				<router-view></router-view>
			</el-main>
	    </el-container>
	  </el-container>
	</div>
</template>

<script>
export default {
	name: 'index',
	created() {
	    this.init()
	},
	data() {
		return {
			userInfo: {
				id: 0,
				name: ''
			}
		}
	},
	methods: {
		init() {
			let user = sessionStorage.getItem("userInfo")
			this.$data.userInfo = JSON.parse(user)
		},
		handleCommand(methodName) {
			if (methodName === 'updateInfo') {
				
			} else if (methodName === 'logout') {
				sessionStorage.clear()
				this.router.push('/login')
			}
		}
	}
}
	
</script>

<style scoped>
	.example-showcase .el-dropdown-link {
	  cursor: pointer;
	  color: var(--el-color-primary);
	  display: flex;
	  align-items: center;
	}
</style>